<template>
  <div class="app-container">
    <!-- 添加或修改请假业务对话框 -->
    <el-form ref="form" :model="form" :rules="rules" label-width="80px">
      <el-form-item label="申请人" prop="applicant">
        <user-select v-model="form.applicant" multiple placeholder="请选择申请人" :max-show="1"></user-select>
      </el-form-item>
      <el-form-item label="申请单位" prop="applicantUnit">
        <treeselect v-model="form.applicantUnit" :options="deptOptions" :show-count="true" placeholder="请选择申请单位" />
      </el-form-item>
      <el-form-item label="被导出人" prop="exportedPerson">
        <person-select v-model="form.exportedPerson" multiple placeholder="请选择被导出人" :max-show="1"></person-select>
      </el-form-item>
      <el-form-item label="申请时间" prop="applicantDate">
        <el-date-picker clearable size="small" style="width: 100%;"
                        v-model="form.applicantDate"
                        type="date"
                        value-format="yyyy-MM-dd"
                        placeholder="选择申请时间">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="到期时间" prop="endDate">
        <el-date-picker clearable size="small" style="width: 100%;"
                        v-model="form.endDate"
                        type="date"
                        value-format="yyyy-MM-dd"
                        placeholder="选择到期时间">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="状态 字典">
        <el-input v-model="form.status" placeholder="请输入状态" />
      </el-form-item>
      <el-form-item label="备注" prop="remark">
        <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
      </el-form-item>
    </el-form>
    <div v-show="parentTaskId===null" class="dialog-footer" style="text-align:center">
      <el-button :loading="buttonLoading" size="small" type="info" @click="submitCallback">关闭</el-button>
      <el-button :loading="buttonLoading" size="small" type="primary" @click="submitForm">提交</el-button>
    </div>
    <!-- 工作流开始 -->
    <verify ref="verifyRef" :taskId="taskId" @submitCallback="submitCallback"
            :taskVariables="taskVariables" :sendMessage="sendMessage"></verify>
    <!-- 工作流结束 -->
  </div>
</template>

<script setup>
import verify from "@/components/Process/Verify";
import UserSelect from "@/components/UserSelect/index.vue";
import Treeselect from "@riophae/vue-treeselect";
import PersonSelect from "@/components/PersonSelect/index.vue";
import {getExportNet} from "@/api/business/exportNet";
import {treeselect} from "@/api/system/dept";

export default {
  name: "exportNet",
  dicts: ['bs_leave_type'],
  props: {
    businessKey: String, // 业务唯一标识
    parentTaskId: String, // 父级任务id
    taskId: String // 任务id
  },
  created() {
    treeselect().then(response => {
      this.deptOptions = response.data;
    });
  },
  components: {
    verify,Treeselect, UserSelect, PersonSelect
  },
  data() {
    return {
      // 流程实例
      processInstanceId: '',
      // 按钮loading
      buttonLoading: false,
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 内网导出表格数据
      exportList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 部门树选项
      deptOptions: undefined,
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        applicant: [
          { required: true, message: "申请人不能为空", trigger: "blur" }
        ],
        applicantUnit: [
          { required: true, message: "申请单位不能为空", trigger: "blur" }
        ],
        exportedPerson: [
          { required: true, message: "申请单位不能为空", trigger: "blur" }
        ],
        applicantDate: [
          { required: true, message: "申请时间不能为空", trigger: "blur" }
        ],
        endDate: [
          { required: true, message: "到期时间不能为空", trigger: "blur" }
        ],
      },
      taskVariables: undefined,
      //消息提醒
      sendMessage: {}
    };
  },
  watch: {
    businessKey: {
      immediate: true, // 很重要！！！
      handler (newVal) {
        if(newVal) {
          this.getById()
        }
      }
    }
  },
  methods: {
    submitCallback(){
      this.$emit("closeForm")
    },
    async getById() {
      const {data} = await getExportNet(this.businessKey)
      this.form = data;
    },
    /** 提交按钮 */
    submitForm() {
      getExportNet(this.businessKey).then(response => {
        this.taskVariables = {
          entity: response.data,
          userId :1
        };
        this.sendMessage = {
          title:'外网导出申请',
          messageContent:'单据【'+this.form.id+"】申请"
        }
      });
      this.$refs.verifyRef.visible = true
      this.$refs.verifyRef.reset()
    }
  }
};
</script>

<style scoped>

</style>
